import React, { Component } from 'react';
import { connect } from "react-redux";
import './App.css';
import './js/getData';
import {store,updateData} from "./reducer/index";
import PageNum from './compent/PageNum';
import ShowVideo from "./compent/showVideo";
import Play from "./compent/play";
import { firstQueryDeviceInfo} from "./js/init";
window.store = store;
window.$getState = window.store.getState;

class App extends Component {
  render() {
    return (
      <div className='app'>
        <div className="search" >
          <span> 搜索： </span>
          <input type="text" className="s-input" id='s-input' placeholder="请输入设备编号" />
          <button className="query" id="query" onClick={this._query}> 查询 </button>
          <button className="reset" id="reset" onClick={this._rest}> 重置 </button>
        </div>
        <ShowVideo />
        <PageNum />
        <Play />
      </div>
    );
  }

  _query = async () => {
    let seaInput = document.getElementById('s-input');
    let searchContent = seaInput.value;
    let { hospitalNameList,hospitalList } = this.props;
    if (hospitalNameList.includes(searchContent)) {
      await firstQueryDeviceInfo(hospitalList[searchContent]);
      updateData({
        deviceIDList: hospitalList[searchContent],
        currentPage:1
      });
    } else { 
      alert("输入信息错误，请重新输入");
    }
  }

  _rest = async () => {
    let seaInput = document.getElementById('s-input');
    seaInput.value = '';

    let { hospitalNameList,hospitalList } = this.props;
    let deviceIDList = [];
    
    hospitalNameList.forEach(key => {
      Array.prototype.push.apply(deviceIDList, hospitalList[key]);
    });
    await firstQueryDeviceInfo(deviceIDList);
    updateData({
      hospitalList,
      deviceIDList,
      hospitalNameList,
      currentPage: 1
    });
  }
}

const mapStateToProps = (state) => {
  return {
    hospitalList: state.hospitalList,
    hospitalNameList: state.hospitalNameList,
  };
};
export default connect(mapStateToProps)(App);
